<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>重叠样式</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body style="height: 100%">
<canvas id="canvas" style="height: 100%">该浏览器不支持canvas,请更换浏览器后重试</canvas>
</body>
<script>
    var CANVAS_WINDTH = document.body.clientWidth;
    var CANVAS_HEIGHT = document.body.clientHeight;
    var balls = [];
    window.onload =function () {
        var canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WINDTH;
        canvas.height = CANVAS_HEIGHT;
        var cxt = canvas.getContext('2d');
        setInterval(function () {
            renderRound(cxt,canvas);
            update();
        },20);
    };

    /*
    * 渲染
    * */
    function renderRound(cxt,canvas) {
        cxt.clearRect(0,0,canvas.width,canvas.height);
        var len = balls.length<100?100:balls.length;
        cxt.globalCompositeOperation = "xor";
        for(var i = 0;i<len;i++) {
            if(balls.length<100){
                var R = getRandom(60,70);
                var x = getRandom(R,canvas.width-R);
                var y = getRandom(R,canvas.height-R);
                var fillColor = getColor();
                var ball = {
                    X:x,
                    Y:y,
                    r:R,
                    vx:getRandom(3,7),
                    vy:getRandom(5,8),
                    color:fillColor
                };
                balls.push(ball);
            }else{
                var x = balls[i].X;
                var y = balls[i].Y;
                var R = balls[i].r;
                var fillColor = balls[i].color;
            }
            fillRound(cxt, x, y, R,fillColor);
        }
    }

    /*
    *
    * */
    function fillRound(cxt,x,y,R,fillColor) {
        cxt.save();
        cxt.beginPath();
        cxt.arc(x,y,R,0,2*Math.PI);
        cxt.fillStyle = fillColor||"#058";
        cxt.fill();
        cxt.restore();
    }

    /*
     * 随机数
     * */
    function getRandom(start,end,bool) {
        var diff = end - start;
        if(bool === 0){
            var index = Math.round(Math.random()*diff+start);
        }else {
            var index = Math.random() * diff + start;
        }
        return index;
    }

    /*
     * 随机颜色
     * */
    function getColor() {
        var r = getRandom(0,255,0);
        var g = getRandom(0,255,0);
        var b = getRandom(0,255,0);
        var str = "rgb("+r+","+g+","+b+")";
        return str;
    }

    /*
    * 小球运动
    * */
    function update() {
        if(balls.length>=100) {
            for (var i = 0; i < balls.length; i++) {
                balls[i].X += balls[i].vx;
                balls[i].Y += balls[i].vy;
                if(balls[i].X<=balls[i].r){
                    //左边碰撞
                    balls[i].X =balls[i].r;
                    balls[i].vx = -balls[i].vx;
                }
                if(balls[i].X>=CANVAS_WINDTH-balls[i].r){
                    //右边碰撞
                    balls[i].X =CANVAS_WINDTH-balls[i].r;
                    balls[i].vx = -balls[i].vx;
                }
                if(balls[i].Y<=balls[i].r){
                    //上边碰撞
                    balls[i].Y =balls[i].r;
                    balls[i].vy = -balls[i].vy;
                }
                if(balls[i].Y>=CANVAS_HEIGHT-balls[i].r){
                    //下边碰撞
                    balls[i].Y = CANVAS_HEIGHT - balls[i].r;
                    balls[i].vy = -balls[i].vy;
                }
            }
        }
    }

</script>
</html>